﻿<template>
  <div v-show="config.isShow" v-loading="config.isLoad">
    <el-row :gutter="10">
      <el-col :span="6">
        <el-table
        border
        stripe
      :data="leftData"
      :show-header="false"
      highlight-current-row
      style="width: 100%;" @row-click="rowClick">
      <el-table-column
        align = 'center'
        :prop="config.labelKey">
      </el-table-column>
    </el-table>
      </el-col>
      <el-col :span="18">
         <el-table
          :data="tableData"
          :stripe="config.stripe"
          :border="config.border"
          :style="{width: config.width}">
          <el-table-column
            align = 'center'
            v-for = '(tableItem) in config.tableHeader' :key = 'tableItem.indexName' :label = 'tableItem.text' show-overflow-tooltip
            :width = "(Object.keys(tableItem).indexOf('isFile') !== -1 && tableItem.isFile) ? '100px' : 'auto'">
            <template slot-scope = 'scope'>
              <span v-if = "Object.keys(tableItem).indexOf('isFile') !== -1 && tableItem.isFile" class = 'editStatus' @click = 'clickRowOfFile(scope.row[tableItem.indexName])'>点击查看</span>
              <span v-else-if = "Object.keys(tableItem).indexOf('isBoolean') !== -1 && tableItem.isBoolean">{{scope.row[tableItem.indexName] ? '是' : '否'}}</span>
              <span v-else>{{scope.row[tableItem.indexName]}}</span>
            </template>
          </el-table-column>
          <el-table-column
            v-if="config.rowEvents && Object.keys(config.rowEvents).length > 0"
            align = 'center'
            label="操作"
            width="180">
            <template slot-scope = 'scope'>
              <template v-for = "(value, name, index) in config.rowEvents">
                <el-button type='text' :key = 'index' @click = 'triggerRowEvent(scope.row, value)'
                  v-if = "name === 'activeTable' && value.events.length && !scope.row.rowEventHideExpress.activeTable">
                  <span><i class='iconfont icon-qiyong'></i>启用</span>
                </el-button>
                <el-button type='text' :key = 'index' @click = 'triggerRowEvent(scope.row, value)'
                v-if = "name === 'deactiveTable' && value.events.length && !scope.row.rowEventHideExpress.deactiveTable">
                  <span><i class='iconfont icon-tingyong'></i>停用</span>
                </el-button>
                <el-button type='text' :key = 'index' @click = 'triggerRowEvent(scope.row, value)'
                v-if = "name === 'selfDefineTable_export' && value.events.length && !scope.row.rowEventHideExpress.selfDefineTable_export">
                  <span><i class='iconfont icon-icon--'></i>导出</span>
                </el-button>
                <el-button type='text' :key = 'index' @click = 'triggerRowEvent(scope.row, value)'
                v-if = "name === 'editTable' && value.events.length && !scope.row.rowEventHideExpress.editTable">
                  <span><i class='iconfont icon-bianji'></i>编辑</span>
                </el-button>
                <el-button type='text' :key = 'index' @click = 'triggerRowEvent(scope.row, value)'
                v-if = "name === 'deleteTable' && value.events.length && !scope.row.rowEventHideExpress.deleteTable">
                  <span><i class='iconfont icon-shanchu'></i>删除</span>
                </el-button>
                <el-button type='text' :key = 'index' @click = 'triggerRowEvent(scope.row, value)'
                v-if = "name === 'preview' && value.events.length && !scope.row.rowEventHideExpress.preview">
                  <span><i class='iconfont icon-yanj'></i>查看</span>
                </el-button>
                <el-button type='text' :key = 'index' @click = 'triggerRowEvent(scope.row, value)'
                v-if = "name === 'showDetail' && value.events.length">
                  <span><i class='iconfont icon-yanj'></i>详细</span>
                </el-button>
                <el-button type='text' :key = 'index' @click = 'triggerRowEvent(scope.row, value)'
                v-if = "name === 'handleWorkflowPage' && value.events.length && !scope.row.rowEventHideExpress.handleWorkflowPage">
                  <span><i class='iconfont icon-zidingyi'></i>办理</span>
                </el-button>
                <el-button type='text' :key = 'index' @click = 'triggerRowEvent(scope.row, value)'
                v-if = "(value.events.length  && !scope.row.rowEventHideExpress[name])">
                  <span><i :class = "'iconfont ' + value.selfIconName"></i>{{value.selfName}}</span>
                </el-button>
              </template>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          v-if="showPN"
          background
          @size-change = "(pageSizeVal) => {handleSizeChange(pageSizeVal)}"
          @current-change = "(page) => {handleCurrentChange(page)}"
          :current-page = "currentPage"
          :page-size = 'pageSize'
          :pager-count = "5"
          :page-sizes = "[10, 25, 50, 100]"
          layout = "total, sizes, prev, pager, next"
          :total = 'totalPage'>
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  props: ['myConfig', 'value'],
  model: {
    prop: 'value',
    event: 'input'
  },
  created () {
  },
  mounted () {
    this.init(this.myConfig)
  },
  data () {
    return {
      showPN: false,
      selectedRow: {},
      tableData: [],
      leftData: [],
      currentPage: 1,
      pageSize: 10,
      totalPage: 0,
      config: {
        isLoad: false,
        valueKey: 'value',
        labelKey: 'label',
        tableHeader: [],
        rowEvents: {},
        stripe: true,
        border: true,
        width: '100%',
        isShow: true
      },
      myValue: {
        leftSelectedValue: ''
      }
    }
  },
  computed: {
  },
  methods: {
    init (config) {
      Object.assign(this.config, config)
      if (this.value) {
        this.myValue = this.value.leftSelectedValue ? this.value.leftSelectedValue : ''
      }
    },
    loadLeftData (data) {
      if (data) {
        this.leftData = data
      }
    },
    loadTableData (data, curPage, pageSize, totalPage) {
      if (data) {
        this.tableData = data
        for (let i = 0; i < this.tableData.length; i++) {
          this.tableData[i].rowEventHideExpress = {}
          for (let k in this.config.rowEvents) {
            // 暂时全部设置为true，日后再根据rowExpress来调整
            this.tableData[i].rowEventHideExpress[k] = false
          }
        }
        if (curPage && pageSize && totalPage) {
          this.showPN = true
          this.currentPage = curPage
          this.pageSize = pageSize
          this.totalPage = totalPage
        } else {
          this.showPN = false
        }
      }
    },
    rowClick (row, column, e) {
      this.myValue.leftSelectedValue = row[this.config.valueKey]
      this.$emit('leftChanged', row[this.config.valueKey])
    },
    handleSizeChange (pageSize) {
      this.$emit('pageChanged', this.myValue.leftSelectedValue, this.curPage, pageSize)
    },
    handleCurrentChange (page) {
      this.$emit('pageChanged', this.myValue.leftSelectedValue, page, this.pageSize)
    },
    showLoad (isShow) {
      this.config.isLoad = isShow
    },
    triggerRowEvent (currentRow, eventItem) {
      this.$emit('handleRowEvent', currentRow, eventItem)
    }
  },
  watch: {
    myValue: {
      handler (val) {
        this.$emit('input', val)
      },
      deep: true
    },
    myConfig: {
      handler (val) {
        this.init(val)
      },
      deep: true
    }
  }
}
</script>
